<template>
  <div class="wrapper">
    <div class="container container-login">
      <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
      <div class="signup-forms flip">
        <div class="login-box" id="_j_login_box" v-show="isShows">
          <div class="inner inner_v2 clearfix">
            <div class="inner_v2_left">
              <form id="_j_login_form" action="javascript:;">
                <div class="form-field">
                  <input
                    id="inputPassword"
                    type="text"
                    placeholder="您的手机号"
                    autocomplete="off"
                    v-model="phoneNumber"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="submit-btn">
                  <button id="_js_loginBtn" @click="toRegisterCheck()">
                    立即注册
                  </button>
                </div>
              </form>
              <div class="agreement">
                注册视为同意<a target="_blank" href="javascript:;"
                  >《骡窝窝用户使用协议》</a
                >
              </div>
              <div class="connect">
                <p class="hd">用合作网站账户直接登录</p>
                <div class="bd">
                  <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                  <a href="javascript:;" class="qq"><i></i>QQ</a>
                  <a href="javascript:;" class="weixin"><i></i>微信</a>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
            <div class="inner_v2_right">
              <img src="../assets/images/qrcode.jpg" />
              <p>扫一扫<br />下载骡窝窝APP</p>
            </div>
          </div>
        </div>
        <div class="signup-box" v-show="!isShows">
          <div class="add-info">
            <div class="hd">账号注册</div>
            <form method="post" id="editForm">
              <input type="hidden" name="phone" value="" id="phone" />
              <div class="form-field m-t-10">
                <input name="nickname" type="text" placeholder="您的昵称" />
                <div class="err-tip"></div>
              </div>
              <div class="form-field">
                <input name="password" type="password" placeholder="您的密码" />
                <div class="err-tip"></div>
              </div>
              <div class="form-field">
                <input
                  name="rpassword"
                  type="password"
                  placeholder="确认密码"
                />
                <div class="err-tip"></div>
              </div>

              <div class="form-field" @click="getVerifyCode()">
                <div class="clearfix">
                  <a class="vcode-send sms-code-send">获取验证码</a>
                  <input
                    name="verifyCode"
                    type="text"
                    placeholder="短信验证码"
                    autocomplete="off"
                    class="vcode-input"
                  />
                </div>
                <div class="err-tip clearfix"></div>
              </div>
              <div class="submit-btn">
                <button type="submit" @click="overRegister()">完成注册</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- <div
      class="fullscreen-bg"
      style="background-image: url(../assets/images/27.jpg)"
    >
      <img
        src="../assets/images/27.jpg"
        style="width: auto; height: 657px; margin-top: -213px"
      />
    </div> -->
  </div>
</template>

<script>
import { ApiPhoneCheck, ApiRegister, ApiVerifyCode } from "@/request/api";
export default {
  data() {
    return {
      isShows: true,
      phoneNumber: "123456",
      nickname: "",
      password: "",
      rpassword: "",
      verifyCode: "",
    };
  },

  methods: {
    async toRegisterCheck() {
      let res = await ApiPhoneCheck({
        phone: this.phoneNumber,
      });
      console.log(res);
      this.isShows = false;
      if (res.code !== 200) {
        return;
      }
    },
    // 获取验证码
    async getVerifyCode() {
      let res = await ApiVerifyCode({
        phone: this.phoneNumber,
      });
      console.log(res);
    },
    // 完成注册
    async overRegister() {
      let res = await ApiRegister({
        phone: this.phoneNumber,
        nickname: this.nickname,
        password: this.password,
        rpassword: this.rpassword,
        verifyCode: this.verifyCode,
      });
      console.log(res);
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/regist.css";
</style>